<script setup>

import {ref} from 'vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  ArrowRight,
  ArrowLeft,
} from "@element-plus/icons-vue";


const emit = defineEmits(['dateChanged','dateChangeDone'])


var startDate = getTodayLastYear(); // by srx
var endDate = getFutureOneMoreYear(); // by srx
var currentDate = ref(new Date());
var period = 24 * 60 * 60 * 1000; // 24 hours (seconds)

var minValue = startDate.getTime() / 1000; // seconds
var maxValue = endDate.getTime() / 1000; // seconds
var currentValue = ref(currentDate.value.getTime() / 1000) ; // seconds
var step = period / 1000; // seconds


const slideHandler = function (dateSliderValue) {
  currentDate.value = new Date(dateSliderValue * 1000);
  console.log(_dateTimeFormatter(currentDate.value));
  currentValue.value = currentDate.value.getTime() / 1000;
  emit('dateChanged',currentValue.value)

};

const slideHandlerOnChange = function (dateSliderValue) {
 
  emit('dateChangeDone',currentValue.value)

};


const leftArrowClick = function(){
    var targetValue = (currentDate.value.getTime() - period) / 1000; //seconds
    if (targetValue > maxValue) {
        return;
    }
    // currentDate.value.setTime(currentDate.value.getTime() + period);
    currentDate.value = new Date(currentDate.value.getTime() - period);
    currentValue.value = currentDate.value.getTime() / 1000; // seconds;
    console.log(_dateTimeFormatter(currentDate.value));
    emit('dateChanged',currentValue.value);
    emit('dateChangeDone',currentValue.value)
}

const rightArrowClick = function(){
    var targetValue = (currentDate.value.getTime() + period) / 1000; //seconds
    if (targetValue > maxValue) {
        return;
    }
    // currentDate.value.setTime(currentDate.value.getTime() + period);
    currentDate.value = new Date(currentDate.value.getTime() + period);
    currentValue.value = currentDate.value.getTime() / 1000; // seconds;
    console.log(_dateTimeFormatter(currentDate.value));
    emit('dateChanged',currentValue.value);
    emit('dateChangeDone',currentValue.value)
}

function _dateTimeFormatter(date) {
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();

  month = `0${month}`.slice(-2);
  day = `0${day}`.slice(-2);
  hour = `0${hour}`.slice(-2);
  minute = `0${minute}`.slice(-2);

  // return `${day}.${month}.${year} ${hour}:${minute}`; // by srx
  return `${year}/${month}/${day} `;
}

function _dateTimeFormatter2Number(date) {
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();

  month = `0${month}`.slice(-2);
  day = `0${day}`.slice(-2);
  hour = `0${hour}`.slice(-2);
  minute = `0${minute}`.slice(-2);

  // return `${day}.${month}.${year} ${hour}:${minute}`; // by srx
  return `${year}${month}${day} `;
}

///////////////////////////////////////////
////// after this line is added by srx ////
///////////////////////////////////////////
// 时间戳转日期格式
function formatDate(now) {
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var date = now.getDate();
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (date >= 0 && date <= 9) {
    date = "0" + date;
  }
  return year + "-" + month + "-" + date;
}
// 日期格式转时间戳
function dateToMs(date) {
  return new Date(date).getTime();
}

// 获取输入日期的前三月
function defaultThreeMonths(localdate) {
  // localdate is String . "2023-03-02"
  var newdate = new Date(localdate.replace(/-/g, "/"));
  newdate = newdate.setMonth(newdate.getMonth() - 3);
  var aa = new Date(newdate);
  return formatDate(aa); // 时间戳转日期格式
}

// 获取输入时间的上一年

function getLastYear(localdate) {
  // localdate is String . "2023-03-02"
  var newdate = new Date(localdate.replace(/-/g, "/"));
  newdate = newdate.setFullYear(newdate.getFullYear() - 1);
  var aa = new Date(newdate);
  return formatDate(aa); // 时间戳转日期格式
}

function getTodayLastYear() {
  var newdate = new Date();
  newdate = newdate.setFullYear(newdate.getFullYear() - 1);
  var aa = new Date(newdate);
  return aa;
  //return formatDate(aa); // 时间戳转日期格式
}

function getFutureOneMoreYear() {
  var newdate = new Date();
  newdate = newdate.setFullYear(newdate.getFullYear() + 1);
  var aa = new Date(newdate);
  return aa;
  //return formatDate(aa); // 时间戳转日期格式
}
console.log(
  " one year ago " +
    getTodayLastYear() +
    " future one yea:" +
    getFutureOneMoreYear()
);
</script>

<template>
  <div class="time-slider-container">
    <div class="labels">
      <span id="min-value" style="text-align: left">{{
        _dateTimeFormatter(startDate)
      }}</span>
      <span id="current-value">{{ _dateTimeFormatter(currentDate) }}</span>
      <span id="max-value" style="text-align: right">{{
        _dateTimeFormatter(endDate)
      }}</span>
    </div>
    <div class="slider-container">
      <el-row>
        <el-col class="mycol" :span="2">
          <el-icon class="myicon"><ArrowLeft @click="leftArrowClick" /></el-icon
        ></el-col>

        <el-col class="mycol" :span="20">
          <input
            id="date-slider"
            class="slider"
            type="range"
            :min="minValue"
            :max="maxValue"
            :value="currentValue"
            @input="slideHandler($event.target.value)"
            @change="slideHandlerOnChange($event.target.value)"
          />
        </el-col>

        <el-col class="mycol" :span="2">
          <el-icon class="myicon"><ArrowRight @click="rightArrowClick"/></el-icon>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style>
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Gotham Rounded, sans-serif;
}

.myicon {
  display: block;
  height: 100%;
}
.mycol{
    /* border:1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-slider-container {
  width: 75%;
  /* border: 1px solid black; */
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 8px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: #bbe257;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: #bbe257;
  cursor: pointer;
  border-radius: 50%;
}

.labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.labels #min-value {
  text-align: left;
}
.labels #max-value {
  text-align: right;
}
.labels #current-value {
  text-align: center;
  font-weight: bolder;
}

.arrow {
  border: solid #e0e0e0;
  width: 16px;
  height: 16px;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  cursor: pointer;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.arrow:hover {
  opacity: 1;
}

/* .right {
  position: absolute;
  margin: 2px 0 0 16px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  position: absolute;
  margin: 2px 0 0 -32px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
} */
</style>